<!-- eslint-disable vue/no-v-model-argument -->
<template>
  <div style="">
   <el-table
    :data="goodData"
    style="width: 80%;padding-left: 30px;"
    >
    <el-table-column 
      label="商品名称"
      width="180" 
      
      >
      <template slot-scope="scope" >
        <el-popover trigger="hover" placement="top">
          <p>商品名称: {{ scope.row.name }}</p>
          <p>售价: {{ scope.row.s_price }}</p>
          <p>进价: {{ scope.row.b_price }}</p>
          <p>库存: {{ scope.row.surplus }}</p>
          <p>已售: {{ scope.row.sell_count }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium" >{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
        
      </template>
    </el-table-column>
    <el-table-column
      label="售价"
      width="180">
      <template slot-scope="scope">
        <span >{{ scope.row.s_price }}</span>
      </template>
    </el-table-column>

 <el-table-column 
      label="进价"
      width="180">
      <template slot-scope="scope">
        
        <span >{{ scope.row.b_price }}</span>
      </template>
    </el-table-column>

     <el-table-column
      label="库存"
      width="180">
      <template slot-scope="scope">
        
        <span >{{ scope.row.surplus }}</span>
      </template>
    </el-table-column>

     <el-table-column
      label="已售"
      width="180">
      <template slot-scope="scope">
        
        <span>{{ scope.row.sell_count }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">
          删除
          </el-button>
          </template>
    </el-table-column>
   </el-table>

     <el-dialog
    title="更新数据"
    :visible.sync="isshow"
    >
     <!-- <common-form
      :formLabel="operateFormLabel"
      :form="operateForm"
      :inline="true"
      ref="form"
     ></common-form> -->
      <el-form ref="form" label-width="100px"  :inline="true">
        <el-form-item label="商品名称">  
           <el-input
            v-model:v-model="goodData[index01].name"
            >
            </el-input>
        </el-form-item>
        <el-form-item label="进价">  
           <el-input
            v-model:v-model="goodData[index01].s_price"
            >
            </el-input>
        </el-form-item>
        <el-form-item label="售价">  
           <el-input
            v-model:v-model="goodData[index01].b_price"
            >
            </el-input>
        </el-form-item>
        <el-form-item label="库存">  
           <el-input
            v-model:v-model="goodData[index01].surplus"
            >
            </el-input>
        </el-form-item>
        <el-form-item label="已售">  
           <el-input
            v-model:v-model="goodData[index01].sell_count"
            >
            </el-input>
        </el-form-item>
        <el-form-item>
            <slot></slot>
        </el-form-item>

    </el-form>



     <div slot="footer" class="dialog-footer">
      <el-button @click="confirml">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>

     </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  
    name:"MyMall",
   
    data() {
        return {
          zancun:{},
          index01:1,
          isshow:false,
            goodData:[
    {
        name:'毛衣',
        s_price:100,
        b_price:50,
        surplus:725,
        sell_count:389
    },
    {
        name:'男装T恤',
        s_price:68,
        b_price:40,
        surplus:300,
        sell_count:246
    },
    {
        name:'中老年男装',
        s_price:268,
        b_price:150,
        surplus:200,
        sell_count:42
    },
    {
        name:'连衣裙',
        s_price:98,
        b_price:50,
        surplus:535,
        sell_count:234
    },
    {
        name:'苹果充电器',
        s_price:85,
        b_price:40,
        surplus:465,
        sell_count:387
    },
    {
        name:'vivo充电器',
        s_price:48,
        b_price:26,
        surplus:300,
        sell_count:213
    },
    {
        name:'华为智能手环',
        s_price:249,
        b_price:180,
        surplus:300,
        sell_count:455
    },
    {
        name:'小米手环',
        s_price:199,
        b_price:130,
        surplus:200,
        sell_count:354
    },
    {
        name:'索尼摄像机',
        s_price:4599,
        b_price:3700,
        surplus:200,
        sell_count:32
    },
    {
        name:'李宁篮球鞋',
        s_price:388,
        b_price:270,
        surplus:675,
        sell_count:421
    },
    {
        name:'回力男鞋板鞋',
        s_price:99,
        b_price:60,
        surplus:450,
        sell_count:341
    },
    {
        name:'lj男鞋运动鞋',
        s_price:179,
        b_price:125,
        surplus:320,
        sell_count:333
    },
    {
        name:'男童衬衫',
        s_price:79,
        b_price:45,
        surplus:363,
        sell_count:241
    },
    {
        name:'女士羽绒服',
        s_price:309,
        b_price:240,
        surplus:560,
        sell_count:140
    },
    {
        name:'儿童白衬衫短袖',
        s_price:69,
        b_price:35,
        surplus:210,
        sell_count:340
    },
    {
        name:'山地变速越野单车',
        s_price:298,
        b_price:200,
        surplus:346,
        sell_count:163
    },
    {
        name:'润唇膏',
        s_price:89,
        b_price:60,
        surplus:400,
        sell_count:278
    },
    {
        name:'鸿星尔克男鞋运动鞋',
        s_price:179,
        b_price:125,
        surplus:320,
        sell_count:333
    },
    {
        name:'防晒喷雾',
        s_price:138,
        b_price:85,
        surplus:700,
        sell_count:622
    },
    {
        name:'海飞丝洗发水',
        s_price:58,
        b_price:40,
        surplus:364,
        sell_count:440
    },
    {
        name:'飘柔洗发水',
        s_price:29,
        b_price:22,
        surplus:330,
        sell_count:348
    },
    {
        name:'电吹风',
        s_price:79,
        b_price:55,
        surplus:340,
        sell_count:140
    },
    {
        name:'奶粉',
        s_price:309,
        b_price:245,
        surplus:445,
        sell_count:265
    },
    {
        name:'火鸡面',
        s_price:27,
        b_price:20,
        surplus:400,
        sell_count:260
    },
    {
        name:'牛奶',
        s_price:82,
        b_price:68,
        surplus:324,
        sell_count:194
    },
    {
        name:'云南普洱',
        s_price:93,
        b_price:72,
        surplus:170,
        sell_count:233
    },
    {
        name:'儿童溜冰鞋',
        s_price:298,
        b_price:240,
        surplus:120,
        sell_count:133
    },
    {
        name:'狗粮',
        s_price:69,
        b_price:45,
        surplus:240,
        sell_count:200
    },
    {
        name:'保温杯',
        s_price:69,
        b_price:50,
        surplus:200,
        sell_count:370
    },
    {
        name:'雨伞',
        s_price:16,
        b_price:12,
        surplus:344,
        sell_count:320
    },
    {
        name:'电话手表',
        s_price:349,
        b_price:280,
        surplus:336,
        sell_count:183
    },
    {
        name:'牙膏',
        s_price:28,
        b_price:24,
        surplus:300,
        sell_count:457
    },
    {
        name:'紫砂',
        s_price:179,
        b_price:125,
        surplus:320,
        sell_count:333
    },
]
        }
    },
    methods: {
      handleEdit(index) {
       
        this.isshow = true
        this.index01 = index
      
       
      },
      handleDelete(index) {
        
       this.$confirm("是否删此商品？","提示",{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:"warning"
        }).then(()=>{
         this.goodData.splice(index,1)
        })
      },
      confirm(){
        this.isshow = false
      },
      confirml(){
        this.isshow = false     
      }
    }
}
</script>

<style>
.el-button {
    height: 38px;
}
</style>